<template>
    <div class="homeworp">
        <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in homelists" :key="index">
                <img :src="item.image" alt="" />
            </div>

        </div>
        </div>
        <div class="homebody">
             <dl v-for="(item,index) in homebody" :key="index">
                 <dt><img src="" alt=""></dt>
                 <dd>{{item}}</dd>
             </dl>
        </div>
        <div class="listscroll">
            <div>
             <homeItem v-for="(item,index) in homelistall" :key="index" :item="item">

             </homeItem>
             <div v-if="flag">--下边没有了哦--</div>
             </div>
        </div>
    </div>
</template>

<script>
import Swiper from "swiper"
import "swiper/swiper.min.css"
import {homebannerList,homeshop} from "../../../api/api"
import homeItem from '@/components/homeItem'
import BScroll from "better-scroll"
export default {
   data(){
       return {
           homelists:[],
           homebody:[
               "蔬菜每日鲜","肉蛋禽","母婴天地","进店必买","美通卡",
               "早晚市","品牌惠","领劵中心","支付优惠","直采品牌"
           ],
           homelistall:[],
           pageid:0,   //当前页码数
           limit:5,  //一页多少条
           total:0, //总页数
           flag:false , //状态提示
       }
   },
   components:{
       homeItem
   },
  async created(){
        this.getSwiper()  //轮播
        this.getList()   //列表
        
        this.$nextTick(()=>{
            this.initBscrolls()
        })
   },
   methods:{
      async getSwiper(){
          let res =await homebannerList();
          if(res.data.status==200){
              this.homelists=res.data.data;
              this.$nextTick(()=>{
                  new Swiper(".swiper-container")
              })
          }
      },
      async getList(){
          let res1=await homeshop({
               pageid:this.pageid,
               limit:this.limit
          });
          console.log(res1);
          if(res1.data.status==200){
              this.homelistall=this.homelistall.concat(res1.data.data.data)
              this.total=Math.ceil(res1.data.data.total/this.limit)
          }
      },
      initBscrolls(){
            this.myBscroll=new BScroll(".listscroll",{
                pullUpLoad:true,    //开启上啦
                pullDownRefresh:true, //开启下拉
                click:true  //开启点击事件
            }) 
            //上拉加载
            this.myBscroll.on("pullingUp", async ()=>{
                 this.pageid++;
             if(this.pageid>=this.total){
                this.flag=true;
                return
             }   
             await this.getList();
             this.$nextTick(()=>{
                 this.myBscroll && this.myBscroll.refresh();
             }) 
             this.myBscroll.finishPullUp()  //结束上啦
            })
            //下拉刷新
            this.myBscroll.on("pullingDown",async ()=>{
                this.pageid=0;
                this.limit=5;
                this.total=0;
                this.homelistall=[];
                this.flag=false;
                await this.getList();
                this.myBscroll.finishPullDown();
                this.myBscroll && this.myBscroll.refresh();
            })
      }
}
}
</script>

<style lang="scss">
.homeworp{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.swiper-container{
    height: 150px;
    width: 100%;
   .swiper-wrapper,.swiper-slide{
       width: 100%;
       height: 100%;
       img{
           width: 100%;
           height: 100%;
       }
   }
}
.homebody{
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: space-around;
    
    flex-wrap: wrap;
    font-size: 14px;
    dl{
        width: 20%;
        text-align: center;
        img{
            width: 30px;
            height: 30px;
        }
    }
}
.listscroll{
    flex: 1;
    overflow: hidden;
    div{
        padding-bottom: 44px;
    }
}
</style>